<template>
    <div class='home-container'>
        <div class='right-container'>
            <div class="right-content white-color">
                <div class="content">
                    <div class="title">
                        <span>更多课程</span>
                        <el-button round class="back-btn" @click="goBack">返回</el-button>
                    </div>
                    <template v-if="active === 'ALL'">
                        <div v-for="(item, index) in courseArry" class="row-class" :key="index">
                            <div class="subject-class">
                                <img src="../../src/assets/img/welcome/star.png" alt="" class='star'>
                                <span>{{item.subject}}</span>
                            </div>
                            <div class="className-class">
                                <span class="className-title">班级名称:</span>
                                <span>{{item.className}}</span>
                                <span class="status-btn" v-if="item.status">{{item.status}}</span>
                            </div>
                            <div class="startTime class-time">
                                <i class="el-icon-date"></i>
                                <span class="span-margin"> 2019-11-09至2019-12-08</span>
                                <i class="el-icon-time"></i>
                                <span class="span-margin"> 12:30-13:30</span>
                                <img src="../../src/assets/img/welcome/greyPerson.png" alt="">
                                <span>讲师: </span>
                                <span class="margin-20"> 小王</span>
                                <img src="../../src/assets/img/welcome/greyPerson.png" alt="">
                                <span>助教: </span>
                                <span> 小王</span>
                            </div>
                            <div class="img-container">
                                <div v-for="(it, idx) in item.courses" :key='idx'>
                                    <div :class="{img: true, 'blue-img': it.color === 'blue', 'green-img': it.color ===
                                'green', 'orange-img': it.color === 'orange'}">
                                        <div class='course-status'>{{it.status}}</div>
                                        <div class="title-num">{{it.name1}}</div>
                                        <div class='course-content'>{{it.name2}}</div>
                                    </div>

                                    <div class="operate-btn">
                                        <div v-for="(self, ix) in it.btns" :class="{'btn-class': true, lock: self.lockStatus, width50:it.btns.length === 2 }" :key="ix"
                                             @click="jumpPage(self)">
                                            <img src="../../src/assets/img/welcome/lock.png" alt="" class="lock-png"
                                                 v-if="self.lockStatus">
                                            {{self.name}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="footer-contain">
                        <el-pagination background :page-sizes="[20, 50, 100, 200]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="400">
                        </el-pagination>
                        <div class='go-page bgColor'>确定</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'home',
    data() {
        return {
            active: 'ALL',
            headerList: ['在线课堂', '学小思教育'],
            openeds: ['5', '5-2'],
            arr: [
                '第一讲',
                '第二讲',
                '第三讲',
                '第四讲'
                // '第五讲',
                // '第六讲',
                // '第七讲',
                // '第八讲',

            ],
            courseArry: [{
                subject: '数学',
                className: '奥数的秘密突击一班',
                'status': '',
                startTime: '2019-11-09至2019-12-08',
                teacher: '王占云',
                help: '王占云',
                more: true,
                courses: [{
                    'name1': '第三讲',
                    'name2': '奥数的秘密',
                    'btns': [{
                        name: '进入教室',
                        lockStatus: false
                    }, {
                        name: '课程回放',
                        lockStatus: false
                    }, {
                        name: '测试结果',
                        lockStatus: false
                    }],
                    'color': 'blue',
                    'status': '未开始'

                }, {
                    'name1': '第二讲',
                    'name2': '奥数的秘密',
                    'btns': [{
                        name: '进入教室',
                        lockStatus: true
                    }, {
                        name: '课程回放',
                        lockStatus: true
                    }, {
                        name: '习题',
                        lockStatus: false,
                        type: 'fill'
                    }],
                    'color': 'green',
                    'status': '未开始'

                }, {
                    'name1': '第一讲',
                    'name2': '奥数的秘密',
                    'btns': [{
                        name: '进入教室',
                        lockStatus: true
                    }],
                    'color': 'orange',
                    'status': '未开始'

                },
                {
                    'name1': '第一讲',
                    'name2': '奥数的秘密',
                    'btns': [{
                        name: '进入教室',
                        lockStatus: true
                    }],
                    'color': 'orange',
                    'status': '未开始'

                }, {
                    'name1': '第一讲',
                    'name2': '奥数的秘密',
                    'btns': [{
                        name: '进入教室',
                        lockStatus: true
                    }],
                    'color': 'orange',
                    'status': '未开始'

                }, {
                    'name1': '第一讲',
                    'name2': '奥数的秘密',
                    'btns': [{
                        name: '进入教室',
                        lockStatus: true
                    }],
                    'color': 'orange',
                    'status': '未开始'

                }, {
                    'name1': '第一讲',
                    'name2': '奥数的秘密',
                    'btns': [{
                        name: '进入教室',
                        lockStatus: false
                    }, {
                        name: '课程回放',
                        lockStatus: false
                    }, {
                        name: '测试结果',
                        lockStatus: false
                    }],
                    'color': 'orange',
                    'status': '未开始'

                }
                ]
            } ]
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        changTab(index) {
            this.active = index
        },
        jumpPage(it) {
            if (!it.lockStatus) {
                if (it.name === '进入教室') {
                    this.$router.push({
                        path: '/studentMange/liveCourse' //跳转的路径
                    })
                }
                if (it.name === '课程回放') {
                    this.$router.push({
                        path: '/studentMange/classBack' //跳转的路径
                    })
                    // this.changTab(2)
                }
                if (it.name === '测试结果') {
                    this.$router.push({
                        path: '/studentMange/studentTestResult', //跳转的路径
                        query: {
                            haveError: it.haveError
                        }
                    })
                }
                if (it.name === '习题') {
                    console.log(it)
                    if (it.type === 'choose') {
                        this.$router.push({
                            path: '/studentMange/choose' //跳转的路径
                        })
                    } else if (it.type === 'fill') {
                        this.$router.push({
                            path: '/studentMange/topic' //跳转的路径
                        })
                    } else {
                        this.$router.push({
                            path: '/studentMange/judge' //跳转的路径
                        })
                    }
                }
            }
        },
        goBack() {
            this.$router.go(-1)
        }
    },
    components: {}
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }

    .right-content {
        height: calc(100% - 70px);

        div.btn-container {
            padding-top: 18px;
            width: calc(100% - 588px);
            .flex(row, space-between, center, nowrap);

            margin: auto;
            height: 44px;

            >div {
                width: 97px;
                height: 30px;
                border-radius: 3px;
                border: 1px solid rgba(96, 98, 102, 0.34);
                text-align: center;
                line-height: 30px;
                font-size: 14px;
                font-family: PingFang-SC-Regular;
                font-weight: 400;
                color: rgba(96, 98, 102, 1);
                cursor: pointer
            }

            .active-color {
                // #53CC90
                background: #53CC90;
                border: solid 1px #53CC90;
                color: #fff;
                position: relative;

                &:after {
                    position: absolute;
                    content: '';
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-top: 5px solid #53CC90;
                    top: 30px;
                    left: 44px;

                }
            }
        }

        .content {
            width: calc(100% - 52px);
            margin: auto;
            height: 100%;

            .row-class {
                margin-top: 25px;
                /*height: calc((100% - 106px) / 2);*/
            }

            .subject-class {
                margin-bottom: 14px;

                img {
                    margin-right: 6px;
                    position: relative;
                    top: 2px;
                }

                span {
                    font-family: PingFang-SC-Regular !important;
                    font-weight: 400;
                    color: rgba(78, 84, 108, 1);
                }
            }

            .className-class {
                font-size: 16px;
                font-family: PingFang-SC-Regular !important;
                font-weight: 400;
                color: rgba(72, 87, 106, 1);
                margin-bottom: 10px;

                .status-btn {
                    background: rgba(255, 171, 43, 1);
                    border-radius: 2px;
                    padding: 2px 8px;
                    color: #FFFFFF;
                    margin-left: 12px;
                    font-size: 12px;
                    font-family: PingFang-SC-Regular !important;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                }
            }

            .startTime {
                font-size: 14px;
                font-family: PingFang-SC-Regular !important;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                margin-bottom: 15px;
                position: relative;

                img {
                    margin-left: 24px;
                    margin-right: 4px;
                    height: 20px;
                    width: 20px;
                    position: relative;
                    top: 6px;
                }

                .more {
                    position: absolute;
                    right: 0px;
                    top: 5px;
                    font-size: 14px;
                    font-family: PingFang-SC-Regular !important;
                    font-weight: 400;
                    color: rgba(96, 98, 102, 1);
                    cursor: pointer;
                    z-index: 1000;

                    &:hover {
                        color: rgba(90, 119, 245, 1);
                    }
                }
            }

            .class-name,
            .class-time {
                color: rgba(153, 153, 153, 1);
                margin-bottom: 10px;
                font-size: 14px;
                font-family: PingFang-SC-Regular;
                font-weight: 400;

                img {
                    width: 18px;
                    height: 18px;
                    position: relative;
                    top: 5px;
                    left: 5px;
                }

                .span-margin {
                    margin-right: 40px;
                }

                .margin-20 {
                    margin-right: 20px;
                }
            }

            .title-course {
                margin-top: -10px;
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                font-family: PingFang-SC-Regular !important;
                font-weight: 500;
                color: rgba(78, 84, 108, 1);

                span {
                    margin-right: 12px
                }
            }

            .img-container {
                .flex(row, space-between, center, wrap);
                position: relative;
                top: -20px;

                /*height: calc(100% - 170px);*/
                >div {
                    width: calc((100% - 40px)/3);
                    border-radius: 4px;
                    /*height: 144px;*/
                    position: relative;
                    margin-top: 20px;
                }

                .operate-btn {
                    .flex(row, center, center, nowrap);
                    border-radius: 0px 0px 4px 4px;
                    border: 1px solid rgba(151, 151, 151, 0.4191);
                    height: 44px;

                    .btn-class {
                        width: calc(100% / 3);
                        text-align: center;
                        font-size: 14px;
                        font-family: PingFang-SC-Regular !important;
                        font-weight: 400;
                        color: rgba(96, 98, 102, 1);
                        cursor: pointer;
                        border-right: solid 1px rgba(151, 151, 151, 1);

                        &:last-child {
                            border-right: none;
                        }

                        &:hover {
                            color: rgba(90, 119, 245, 1);
                        }
                    }
                    .width50{
                        width: calc(100% / 2);
                    }

                    .lock-png {
                        width: 11px;
                        height: 14px;
                        margin-right: 5px;
                        position: relative;
                        top: 1px;

                    }
                    .lock{
                        color:rgba(96,98,102, 0.4);
                        cursor:default;
                        &:hover {
                            color:rgba(96,98,102, 0.4);
                        }
                    }
                }

                .img {
                    height: 114px;
                    border-radius: 4px 4px 0px 0px;
                    background-size: cover;
                    /*height: calc(100% - 170px);*/
                }

                .course-status {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    font-size: 12px;
                    font-family: PingFang-SC-Regular !important;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    width: 48px;
                    height: 31px;
                    background: rgba(243, 111, 127, 1);
                    border-radius: 0px 4px 0px 3px;
                    opacity: 0.9475;
                    line-height: 31px;
                    text-align: center;
                }

                .blue-img {
                    background: url("../../src/assets/img/welcome/studentBlue.png") center no-repeat;
                }

                .green-img {
                    background: url("../../src/assets/img/welcome/studentGreen.png") center no-repeat;
                }

                .orange-img {
                    background: url("../../src/assets/img/welcome/studentOrange.png") center no-repeat;
                }

                .title-num,
                .course-content {
                    font-size: 22px;
                    font-family: PingFang-SC-Regular !important;
                    font-weight: 500;
                    color: rgba(255, 255, 255, 1);
                    margin-left: 38px;
                }

                .title-num {
                    padding-top: 30px;
                    margin-bottom: 14px;
                }

                .course-content {
                    font-size: 17px;
                }
            }

        }

        .live-show {
            width: calc(100% - 330px);

            .grey-footer {
                margin-top: -4px;
                height: 55px;
                width: 100%;
                line-height: 55px;
                background: #2E2E36;
                position: relative;

                .class-num {
                    background: rgba(32, 32, 38, 1);
                    border-radius: 4px;
                    padding: 7px 14px;
                    font-size: 8px;
                    font-family: PingFang-SC-Regular !important;
                    font-weight: 400;
                    color: rgba(254, 254, 254, 1);
                    margin: 0px 12px;
                    cursor: pointer;
                }

                .fir-class {
                    margin-left: 30px;
                }

                .el-icon-arrow-left {
                    position: absolute;
                    left: 10px;
                    top: 22px;
                    color: #FFFFFF;
                    cursor: pointer;
                }

                .el-icon-arrow-right {
                    position: absolute;
                    right: 10px;
                    top: 22px;
                    color: #FFFFFF;
                    cursor: pointer;
                }
            }
        }

        .title-course {
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            font-family: PingFang-SC-Regular !important;
            font-weight: 400;
            color: rgba(72, 87, 106, 1);

            span {
                margin-right: 12px
            }

            .green-color {
                width: 81px;
                height: 24px;
                background: rgba(171, 240, 206, 0.34);
                ;
                border-radius: 2px;
                border: 1px solid rgba(83, 204, 144, 0.36);
                font-size: 14px;
                font-family: PingFang-SC-Regular !important;
                font-weight: 400;
                padding: 1px 12px;
                cursor: pointer;
                color: rgba(83, 204, 144, 1);
            }

        }

        .className2-class {
            font-size: 14px;
            font-family: PingFang-SC-Regular !important;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin-bottom: 8px;
        }

        .className-title,
        .startTime-title {
            margin-right: 5px;
        }

        .footer-contain {
            position: relative;
            left: 16px;
            padding-bottom: 15px;
        }

        .title {
            height: 70px;
            line-height: 70px;
            text-align: center;
            border-bottom: solid 1px rgba(232, 233, 234, 1);

            span {
                font-size: 20px;
                font-family: PingFang-SC-Regular !important;
                font-weight: 400;
                color: rgba(28, 28, 28, 1);

            }

            .back-btn {
                float: right;
                margin-top: 15px;
            }
        }

    }

    // 先这样
    .home-container {
        min-height: 1200px !important;
    }

    .right-container {
        width: 100% !important;
    }

</style>
<style lang="less">
    .left-container {
        ul {
            background-color: #22345E
        }
    }

    .btn-group {
        >div {
            text-align: center
        }
    }

    .date-line {
        text-align: center !important
    }

    .star {
        width: 15px;
        height: 15px;
        background: rgba(255, 171, 43, 1);
        border-radius: 1px;
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    // 日历
    .el-picker-panel__body {
        font-family: PingFang-SC-Regular !important;
    }

    // 分页样式
    .el-pagination {
        .el-pager {
            .number {
                margin: 0px !important;
                background: #ffffff !important;
                border: 1px solid rgba(209, 219, 229, 1);
                color: #546374 !important;
                font-weight: 400;
                border-left: none
            }

            li.active {
                background-color: #409EFF !important;
                color: #fff !important;
                border-radius: 0px !important;
                width: 29px !important;
                height: 28px !important;
                border: solid 1px #409EFF !important;
            }

            li {
                border-radius: 0px !important;
            }
        }

        .btn-prev,
        .btn-next {
            margin: 0px !important;
            background: #ffffff !important;
            border: 1px solid rgba(209, 219, 229, 1);

        }

        .btn-prev {
            border-top-right-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
        }

        .btn-next {
            border-top-left-radius: 0px !important;
            border-bottom-left-radius: 0px !important;
        }

        .btn-next {
            border-left: none;
        }

    }

    .bgColor {
        background-color: #53CC90 !important;
    }

    @import url('../../src/assets/less/override-element-ui.less');

</style>
